<template>
    <div class="w100 h100 header-container flex-row-between-center">
        <div class="flex-row-start-center">
            <el-icon v-if="isCollapse" :size="25" class="expand-icon" @click="changeMenu"><Expand /></el-icon>
            <el-icon v-else :size="25" class="expand-icon" @click="changeMenu"><Fold /></el-icon>
            <el-breadcrumb separator="/" v-if="isShowBreadcrumb">
                <el-breadcrumb-item v-for="(item, index) in breadcrumbArr" :key="index">{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-dropdown @command="dropDownChange">
            <span class="el-dropdown-link flex-row-start-center">
                <el-avatar :size="32" src="https://joeschmoe.io/api/v1/random" />&nbsp;
                <span>admin</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script>
    import {useStore} from 'vuex'
    import {computed} from 'vue'
    import {Expand, Fold, ArrowDown} from '@element-plus/icons-vue'
    import {removeToken} from '@/utils/auth'
    export default {
        name: 'HeaderName',
        components: {Expand, Fold, ArrowDown},
        setup() {
            const store = useStore()
            const breadcrumbArr = computed(()=> store.getters.getBreadCrumbArr)
            const isShowBreadcrumb = computed(()=>store.getters.getShowBreadcrumb)
            const isCollapse = computed(()=> store.getters.getIsCollapse)
            const changeMenu = () => {
                store.commit('setIsCollapse', !isCollapse.value)
            }
            const dropDownChange = (command) => {
                if(command == 'logout'){
                    // 退出登录
                    removeToken()
                    window.location.href = '/'
                }
            }
            return {
                breadcrumbArr,
                changeMenu,
                isCollapse,
                isShowBreadcrumb,
                dropDownChange
            }
        }
    }
</script>
<style scoped>
.expand-icon {
    margin-right: 10px;
    cursor: pointer;
}
</style>